<template>
  <div class="container">
    <el-card class="card">
      <!-- <el-breadcrumb>
        <el-breadcrumb-item>试题录入</el-breadcrumb-item>
      </el-breadcrumb> -->
      <div slot="header">
        <span>试题录入</span>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        ref="ruleForm"
      >
        <el-form-item label="学科：" prop="subject">
          <el-select
            v-model="ruleForm.subject"
            placeholder="请选择学科"
            style="width: 400px"
            @change="getCat"
          >
            <el-option
              v-for="item in subjectList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：" prop="catalogue">
          <el-select
            v-model="ruleForm.catalogue"
            placeholder="请选择目录"
            style="width: 400px"
          >
            <el-option
              v-for="item in catList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：" prop="enterprise">
          <el-select
            v-model="ruleForm.enterprise"
            placeholder="请选择企业"
            style="width: 400px"
          >
            <el-option
              v-for="item in entList"
              :label="item.company"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" prop="city">
          <el-select
            v-model="ruleForm.city"
            placeholder="请选择城市"
            style="width: 195px; margin-right: 10px"
            @change="cityVal"
          >
            <el-option
              v-for="(item, index) in citysList"
              :label="item"
              :value="item"
              :key="index"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="ruleForm.citys"
            placeholder="请选择县/区"
            style="width: 195px"
          >
            <el-option
              v-for="(item, index) in countyList"
              :label="item"
              :value="item"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向：" prop="direction">
          <el-select
            v-model="ruleForm.direction"
            placeholder="请选择方向"
            style="width: 400px"
          >
            <el-option
              v-for="(item, index) in directionList"
              :label="item"
              :value="index"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型：" prop="QAtype">
          <el-radio v-model="ruleForm.QAtype" label="0">单选</el-radio>
          <el-radio v-model="ruleForm.QAtype" label="1">多选</el-radio>
          <el-radio v-model="ruleForm.QAtype" label="2">简答</el-radio>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <el-radio v-model="ruleForm.difficulty" label="0">简单</el-radio>
          <el-radio v-model="ruleForm.difficulty" label="1">一般</el-radio>
          <el-radio v-model="ruleForm.difficulty" label="2">困难</el-radio>
        </el-form-item>
        <el-form-item label="题干：" prop="stem">
          <el-tiptap
            v-model="ruleForm.stem"
            :extensions="extensions"
            lang="zh"
          />
        </el-form-item>
        <!-- 单选 -->
        <el-form-item
          label="选项："
          style="margin-top: 35px"
          v-if="ruleForm.QAtype == 0"
          ><div
            v-for="item in ruleForm.options"
            :key="item.code"
            style="padding-bottom: 30px"
          >
            <el-radio v-model="item.isRight" label="1"
              >{{ item.code }}:</el-radio
            >
            <el-input style="width: 250px" class="FatherInpiut"></el-input>
            <!-- 图片 -->
            <el-upload
              class="upload-demo"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-exceed="handleExceed"
            >
              <el-button plain class="btn"
                >上传图片 <i class="el-icon-circle-close btn-img"></i
              ></el-button>
            </el-upload>

            <!-- <el-upload
              style="margin-left: 4px"
              class="avatar-uploader"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-exceed="handleExceed"
            >
              <img v-if="item.img" :src="item.img" class="avatar" />
              <span v-else>上传图片</span>
              <i class="el-icon-circle-close"></i>
            </el-upload> -->
            <!-- 图片 -->
          </div>
        </el-form-item>
        <!-- 单选 -->
        <!-- 多选 -->
        <el-form-item
          label="选项："
          style="margin-top: 35px"
          v-if="ruleForm.QAtype == 1"
        >
          <div
            v-for="item in ruleForm.options"
            :key="item.code"
            style="padding-bottom: 30px"
          >
            <el-checkbox v-model="item.isRight" style="margin-right: 30px"
              >{{ item.code }}:</el-checkbox
            >
            <el-input style="width: 250px" class="FatherInpiut"></el-input>
            <!-- 图片 -->
            <el-upload
              class="upload-demo"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-exceed="handleExceed"
            >
              <el-button plain class="btn"
                >上传图片
                <i class="el-icon-circle-close btn-img" @click="delImg"></i
              ></el-button>
            </el-upload>
            <!-- 图片 -->
          </div>
        </el-form-item>
        <!-- 多选 -->
        <el-form-item>
          <el-button
            type="danger"
            size="small"
            disabled
            v-if="ruleForm.QAtype == 0"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <el-form-item style="margin-top: -22px">
          <el-button
            type="danger"
            size="small"
            v-if="ruleForm.QAtype == 1"
            @click="addOption"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <el-form-item label="解析视频:">
          <el-input style="width: 430px" v-model="ruleForm.Pvideo"></el-input>
        </el-form-item>
        <el-form-item label="答案解析：" prop="Answer">
          <el-tiptap
            v-model="ruleForm.Answer"
            :extensions="extensions"
            lang="zh"
          />
        </el-form-item>
        <el-form-item label="题目备注：">
          <el-input
            style="width: 430px"
            type="textarea"
            :rows="5"
            placeholder="请输入题目备注"
            v-model="ruleForm.textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="试题标签:">
          <el-select
            v-model="ruleForm.TestLabel"
            multiple
            placeholder="请选择"
            style="width: 430px"
          >
            <el-option
              v-for="item in TestLabel"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// @ts-nocheck

// @ts-ignore

// @ts-ignore
import { add as addQuestions } from '@/api/hmmm/questions.js' // 提交题目
import { simple } from '@/api/hmmm/subjects.js' // 学科
import { simple as dirList } from '@/api/hmmm/directorys.js' // 目录
import { list as entList } from '@/api/hmmm/companys.js' // 企业
import { provinces, citys } from '@/api/hmmm/citys.js' // 城市
import { direction } from '@/api/hmmm/constants.js' // 方向
import { simple as getTes } from '@/api/hmmm/tags.js' // 试题
import {
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Link,
  Image,
  CodeBlock,
  Blockquote,
  TodoItem,
  TodoList,
  TextAlign,
  FontSize,
  FontType,
  Fullscreen,
  TextHighlight,
  TextColor,
  FormatClear,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  History,
  TrailingNode,
  HardBreak,
  HorizontalRule,
  LineHeight,
  Indent
} from 'element-tiptap'
export default {
  name: 'wuhu',
  data () {
    return {
      ruleForm: {
        Answer: '', // 答案解析
        stem: '', // 题干
        subject: '', // 学科
        catalogue: '', // 目录
        enterprise: '', // 企业
        city: '', // 城市
        citys: '', // 县级
        direction: '', // 方向
        QAtype: '0', // 题型
        difficulty: '0', // 难度
        Pvideo: '', // 解析视频
        textarea: '', // 题目备注
        TestLabel: [], // 试题标签
        checked: false, // 多选状态
        options: [
          // 选项
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      },

      subjectList: [], // 学科简单列表
      catList: [], // 目录简单列表
      entList: [], // 企业列表
      citysList: [], // 城市列表
      countyList: [], // 县区列表
      directionList: [], // 方向列表
      TestLabel: [], // 试题标签列表

      rules: {
        subject: [
          {
            required: true,
            message: '请选择学科',
            trigger: 'change'
          }
        ],
        catalogue: [
          {
            required: true,
            message: '请选择目录',
            trigger: 'change'
          }
        ],
        enterprise: [
          {
            required: true,
            message: '请选择企业',
            trigger: 'change'
          }
        ],
        city: [
          {
            required: true,
            message: '请选择地区',
            trigger: 'change'
          }
        ],
        direction: [
          {
            required: true,
            message: '请选择方向',
            trigger: 'change'
          }
        ],
        QAtype: [
          {
            required: true,
            message: '请选择题型',
            trigger: 'change'
          }
        ],
        difficulty: [
          {
            required: true,
            message: '请选择难度',
            trigger: 'change'
          }
        ],
        stem: [
          {
            required: true,
            message: '请输入题干',
            trigger: 'change'
          }
        ],
        Answer: [
          {
            required: true,
            message: '请输入答案解析',
            trigger: 'change'
          }
        ]
      },
      extensions: [
        new Doc(), // 必须项
        new Text(), // 必须项
        new Paragraph(), // 必须项
        new Heading({ level: 6 }), // 标题
        new Bold({ bubble: true }), // 加粗 bubble: true 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: false }), // 下划线 bubble: true, menubar: false 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Italic({ bubble: true }), // 斜体
        new Strike({ bubble: true }), // 删除线
        new ListItem(), // 使用列表必须项
        new BulletList({ bubble: true }), // 无序列表
        new OrderedList({ bubble: true }), // 有序列表
        new Link(), // 链接
        new Image(), // 图片
        new CodeBlock({ bubble: true }), // 代码块
        new Blockquote(), // 引用
        new TodoItem(), // 任务列表必须项
        new TodoList(), // 任务列表
        new TextAlign({ bubble: true }), // 文本对齐方式
        new FontSize({ bubble: true }), // 字号
        new FontType({ bubble: true }), // 字体
        new Fullscreen(), // 全屏
        new TextHighlight({ bubble: true }), // 文本高亮
        new TextColor({ bubble: true }), // 文本颜色
        new FormatClear({ bubble: true }), // 清除格式
        new Table({ resizable: true }), // 表格
        new TableHeader(), // 表格必须项
        new TableCell(), // 表格必须项
        new TableRow(), // 表格必须项
        new History(), // 撤销
        new TrailingNode(), // 重做
        new HardBreak(), // 分割线
        new HorizontalRule(), // 行距
        new LineHeight(), // 增加缩进
        new Indent() // 减少缩进
      ]
    }
  },
  methods: {
    delImg () {
      // 按钮删除
      if (this.ruleForm.options.length > 4) {
        const Imgindex = this.ruleForm.options.length - 1
        this.ruleForm.options.splice(Imgindex, 1)
      } else {
        return this.$message.error('最少四个选项，请添加选项后再删除')
      }
    },
    addOption () {
      // 添加el-from-item
      // 规律：
      // 索引 0 ---> A  ascii  65
      // 索引 1 ---> B  ascii  66
      // 索引 2 ---> C  ascii  67
      // 索引 3 ---> D  ascii  68
      // 索引 4 ---> E  ascii  69
      // ...
      // 总结 code = String.fromCharCode(index + 65)
      this.ruleForm.options.push({
        isRight: false,
        code: String.fromCharCode(65 + this.ruleForm.options.length),
        title: '',
        img: ''
      })
    },
    handleRemove (file, fileList) {
      // 图片
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    onSubmit () {
      // 提交
      this.$refs.ruleForm.validate(async (val) => {
        if (val) {
          const data = { ...this.ruleForm }
          // console.log(data)
          // data.tags = data.tags.join(',')

          await addQuestions(data)
          this.$message.success('添加成功')
          //  this.$router.push('/questions/list')
        } else {
          console.log('校验失败！')
          return false
        }
      })
    },
    // 获取数据获取数据获取数据获取数据获取数据获取数据获取数据获取数据获取数据获取数据
    async subList () {
      // 获取学科列表
      const { data } = await simple()
      this.subjectList = data
      // console.log(this.subjectList, '学科')
    },
    async comList () {
      // 获取企业列表
      const { data } = await entList()
      this.entList = data.items
      // 目录的subjectName对应学科的value
    },
    getCitys () {
      // 获取城市列表
      this.citysList = provinces()
    },
    getDirection () {
      // 获取方向列表
      this.directionList = direction
    },

    cityVal (e) {
      // 获取县区
      this.countyList = citys(e)
      this.ruleForm.citys = this.countyList[0]
    },
    async getCat () {
      // 获取目录
      const Catres = await dirList({ subjectID: this.ruleForm.subject })
      this.catList = Catres.data

      const Tesres = await getTes({ subjectID: this.ruleForm.subject })
      this.TestLabel = Tesres.data
      console.log(Tesres.data)
    }
  },
  created () {
    this.subList() // 学科
    this.comList() // 企业
    this.getCitys() // 城市
    this.getDirection() // 方向
  }
}
</script>

<style scoped lang="less">
.card {
  margin: 17px;
}
/deep/ .btn {
  margin-left: 5px;
  border-style: dashed;
  padding-top: 22px;
  padding-bottom: 22px;
  position: relative;

  .btn-img {
    position: absolute;
    top: -8px;
    left: 90px;
    background-color: #fff;
  }
}
.FatherInpiut {
  position: relative;
}
.upload-demo {
  position: absolute;
  top: -13px;
  left: 317px;
}
</style>
